<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="支付名称" required :labelCol="labelCol" :wrapperCol="wrapperCol" prop="payName">
              <a-input v-model="model.payName" placeholder="请输入支付名称"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="支付编码" required :labelCol="labelCol" :wrapperCol="wrapperCol" prop="payCode">
              <!--<a-select v-decorator="[ 'payCode',{rules: [{ required: true, message: '请选择支付编码'}]}]"  placeholder="请选择支付编码" @change="payCodeChange" :getPopupContainer= "(target) => target.parentNode">
                <a-select-option value="WxPay">微信</a-select-option>
                <a-select-option value="AliPay">支付宝</a-select-option>
                <a-select-option value="Balance">余额</a-select-option>
              </a-select>-->
              <!--<a-input v-model="model.payCode" placeholder="请输入编码"  ></a-input>-->
              <j-dict-select-tag  v-model="model.payCode" placeholder="请选择支付编码"  @change="payCodeChange" dictCode="pay_code"/>
            </a-form-model-item>
            <!-- payCodeData: [{ label: '微信', value: 'WxPay' }, { label: '支付宝', value: 'AliPay' }, { label: '余额', value: 'Balance' },{ label: '微信服务商', value: 'WxServiceProvider' }],
        platTypeData:[{ label: '微信小程序', value: 'Applet' }, { label: '微信公众号', value: 'WxMp' }],-->
          </a-col>
          <a-col :span="24" v-if="payCode!='ApplePay'">
            <a-form-model-item :label="getLabel" required :labelCol="labelCol" :wrapperCol="wrapperCol" prop="partner">
              <a-input v-model="model.partner"  placeholder="请输入信息" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" v-if="payCode!='ApplePay'">
            <a-form-model-item label="AppID" required :labelCol="labelCol" :wrapperCol="wrapperCol" prop="appId">
              <a-input v-model="model.appId" placeholder="请输入AppID"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" v-if="payCode!='ApplePay'">
            <a-form-model-item label="平台类型" required :labelCol="labelCol" :wrapperCol="wrapperCol" prop="platType">
              <!--<a-input v-model="model.platType" placeholder="请选择平台类型"  ></a-input>-->
              <j-dict-select-tag v-model="model.platType" type="radio" title="平台类型" dictCode="plat_type" placeholder="请选择平台类型"/>
            <!--  <a-select  v-model="model.platType"  placeholder="请选择性别" :getPopupContainer= "(target) => target.parentNode">
                <a-select-option :value="Applet">微信小程序</a-select-option>
                <a-select-option :value="WxMp">微信公众号</a-select-option>
              </a-select>-->
            </a-form-model-item>
          </a-col>
          <a-col :span="24" v-if="payCode!='ApplePay'">
            <a-form-model-item label="支付平台公钥" required :labelCol="labelCol" :wrapperCol="wrapperCol" prop="publicKey">
              <a-input v-model="model.publicKey" placeholder="请输入支付平台公钥"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" v-if="payCode!='ApplePay'">
            <a-form-model-item label="应用私钥" required :labelCol="labelCol" :wrapperCol="wrapperCol" prop="privateKey">
              <a-input v-model="model.privateKey" placeholder="请输入应用私钥"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" v-if="payCode!='ApplePay'">
            <a-form-model-item label="notifyUrl" required :labelCol="labelCol" :wrapperCol="wrapperCol" prop="notifyUrl">
              <a-input v-model="model.notifyUrl" placeholder="请输入notifyUrl"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" v-if="payCode!='ApplePay'">
            <a-form-model-item label="returnUrl" required :labelCol="labelCol" :wrapperCol="wrapperCol" prop="returnUrl">
              <a-input v-model="model.returnUrl" placeholder="请输入returnUrl"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" v-if="payCode=='AliPay'">
            <a-form-model-item label="seller" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="seller">
              <a-input v-model="model.seller" placeholder="请输入seller"  ></a-input>
            </a-form-model-item>
          </a-col>
          <!--<a-col :span="24">
            <a-form-model-item label="签名类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="signType">
              <a-input v-model="model.signType" placeholder="请输入签名类型"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="枚举值，字符编码 utf-8,gbk等等" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="inputCharset">
              <a-input v-model="model.inputCharset" placeholder="请输入枚举值，字符编码 utf-8,gbk等等"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="支付类型,aliPay：支付宝，wxPay：微信, youdianPay: 友店微信,此处开发者自定义对应com.egzosn.pay.demo.entity.PayType枚举值" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="payType">
              <a-input v-model="model.payType" placeholder="请输入支付类型,aliPay：支付宝，wxPay：微信, youdianPay: 友店微信,此处开发者自定义对应com.egzosn.pay.demo.entity.PayType枚举值"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="消息类型，text,xml,json" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="msgType">
              <a-input v-model="model.msgType" placeholder="请输入消息类型，text,xml,json"  ></a-input>
            </a-form-model-item>
          </a-col>-->
          <a-col :span="24" v-if="payCode=='WxPay'">
            <a-form-model-item label="请求证书路径" required :labelCol="labelCol" :wrapperCol="wrapperCol" prop="keystorePath">
              <a-input v-model="model.keystorePath" placeholder="请输入请求证书路径"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" v-if="payCode=='WxPay'">
            <a-form-model-item label="证书对应的密码" required :labelCol="labelCol" :wrapperCol="wrapperCol" prop="storePassword">
              <a-input v-model="model.storePassword" placeholder="请输入证书对应的密码"  ></a-input>
            </a-form-model-item>
          </a-col>
         <!-- <a-col :span="24">
            <a-form-model-item label="是否为测试环境" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isTest">
              <a-input-number v-model="model.isTest" placeholder="请输入是否为测试环境" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="是否启用" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="payStatus">
              <a-input-number v-model="model.payStatus" placeholder="请输入是否启用" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="applinks" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="applinks">
              <a-input v-model="model.applinks" placeholder="请输入applinks"  ></a-input>
            </a-form-model-item>
          </a-col>-->
          <a-col :span="24">
            <a-form-model-item label="logo" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="payLogo">
              <!--<a-input v-model="model.payLogo" placeholder="请输入logo"  ></a-input>-->
              <a-upload
                listType="picture-card"
                class="avatar-uploader"
                :showUploadList="false"
                :action="uploadAction"
                :data="{'isup':1}"
                :headers="headers"
                :beforeUpload="beforeUpload"
                @change="handleChange"
              >
                <img v-if="payLogoUrl" :src="getpayLogoView()" alt="支付图标" style="height:104px;max-width:300px"/>
                <div v-else>
                  <a-icon :type="uploadzpLoading ? 'loading' : 'plus'" />
                  <div class="ant-upload-text">上传</div>
                </div>
              </a-upload>
            </a-form-model-item>
          </a-col>
          <!--<a-col :span="24">
            <a-form-model-item label="乐观锁" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="revision">
              <a-input v-model="model.revision" placeholder="请输入乐观锁"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="是否删除(0未删除 1已删除)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="deleted">
              <a-input-number v-model="model.deleted" placeholder="请输入是否删除(0未删除 1已删除)" style="width: 100%" />
            </a-form-model-item>
          </a-col>-->
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  import { ACCESS_TOKEN } from "@/store/mutation-types"
  import Vue from 'vue'
  export default {
    name: 'PayConfigForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
          payName:{rules: [{ required: true, message: '请输入支付名称!' }]},
          payCode:{rules: [{ required: true, message: '请输入支付编码!' }]},
          partner:{rules: [{ required: true, message: '请输入信息!' }]},
          appId:{rules: [{ required: true, message: '请输入信息!' }]},
          platType:{rules: [{ required: true, message: '请选择平台类型!' }]},
          notifyUrl:{rules: [{ required: true, message: '请输入notifyUrl!' }]},
          returnUrl:{rules: [{ required: true, message: '请输入returnUrl!' }]},
          keystorePath:{rules: [{ required: true, message: '请输入证书路径!' }]},
          storePassword:{rules: [{ required: true, message: '请输入证书密码!' }]},
          publicKey:{rules: [{ required: true, message: '请输入公钥!' }]},
          privateKey:{rules: [{ required: true, message: '请输入私钥!' }]}
        },
        payCode:'ApplePay',
        payLogo:{},
        payLogoUrl:"",
        uploadzpLoading:false,
        url: {
          fileUpload: window._CONFIG['domianURL']+"/sys/common/upload",
          add: "/pay/payConfig/add",
          edit: "/pay/payConfig/edit",
          queryById: "/pay/payConfig/queryById"
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
      getLabel() {
        if (this.model.payCode == 'WxPay') {
          return '商户号'
        }
        if (this.model.payCode == 'AliPay') {
          return 'PID'
        }
        if (this.model.payCode == 'PayInShop') {
          return '商户号'
        }
        if (this.model.payCode == 'WxServiceProvider') {
          return '商户号'
        }
      },
      uploadAction:function () {
        return this.url.fileUpload;
      }
    },
    created () {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {"X-Access-Token":token}
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
      debugger
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        debugger
        this.model = Object.assign({}, record);
        this.visible = true;
        //编辑页面
        if(this.model.id){
          this.payCode=this.model.payCode
          if(record.isTest==0){
            this.model.isTest=false
          }else{
            this.model.isTest=true
          }
        }else{
          //添加页面
          this.model.payCode = 'ApplePay'
          this.payCode='ApplePay'
          /*this.form.setFieldsValue({
            payCode:'Balance'
          })*/
        }
      },
      payCodeChange(e){
        debugger
       console.log(this.model.payCode)
        this.model.payCode=e
        this.payCode=e
        if(this.model.payCode !== 'ApplePay'){
          this.model.platType = 'Applet'
        }
      },
    beforeUpload: function(file){
      var fileType = file.type;
      if(fileType.indexOf('image')<0){
        this.$message.warning('请上传图片');
        return false;
      }
      //TODO 验证文件大小
    },
    handleChange (info) {
      debugger;
      this.payLogoUrl = "";
      if (info.file.status === 'uploading') {
        this.uploadzpLoading = true;
        return
      }
      if (info.file.status === 'done') {
        debugger;
        var response = info.file.response;
        this.uploadzpLoading = false;
        console.log(response);
        if(response.success){
          this.model.payLogo = response.message;
          this.payLogoUrl = "Has no pic url yet";
        }else{
          this.$message.warning(response.message);
        }
      }
    },
      getpayLogoView(){
      return this.url.imgerver +"/"+ this.model.payLogo;
    },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            that.model.deleted=0
            if(that.model.payCode=='AliPay'){
              that.model.signType='RSA2'
              that.model.msgType='text'
              that.model.payType='aliPay'
            }else{
              that.model.signType='MD5'
              that.model.msgType='xml'
              if(that.model.payCode=='WxPay'){
                that.model.payType='wxPay'
              }else if(that.model.payCode=='ApplePay'){
                that.model.payType='applePay'
              }else if(that.model.payCode=='WxServiceProvider'){
                that.model.payType='wxPay'
              }
            }
            that.model.storePassword = that.model.partner
            that.model.inputCharset='utf-8'
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
         
        })
      },
    }
  }
</script>